<script setup lang='tsx' name='Register'>
import type { RegisterUserDto } from '@/types';
import { loginApi, registerApi, registerCaptchaApi } from '@/api';
import type { ComponentSize, FormInstance, FormRules, MessageHandler } from 'element-plus'
import { customMsg, useCountdown } from '@/utils'
const router = useRouter()
const formRef = ref<FormInstance | null>(null)
const form = reactive<RegisterUserDto & { confirmPassword: string }>({
    username: 'lisi1',
    password: '123456',
    confirmPassword: '123456',
    nickName: '语落叶',
    email: '2224023654@qq.com',
    captcha: '111111'
})

const validatePassword = (rule: any, value: string, callback: any) => {
    if (value !== form.password && value !== '') {
        return callback(new Error('两次密码不一致'))
    }
    callback()
}
const validateEmail = (rule: any, value: string, callback: any) => {
    const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    if (!reg.test(value)) {
        return callback(new Error('邮箱格式不正确'))
    }
    callback()
}
const rules = reactive<FormRules<typeof form>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { max: 16, min: 6, message: '密码长度在6-16位之间', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { validator: validatePassword, trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { validator: validateEmail, trigger: 'blur' },
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
    ],
})

async function getRegister() {
    await formRef.value!.validate()
    const { data, msg } = await registerApi(form)

    const { countdownTime, startCountdown, stopCountdown } = useCountdown(
        3,
        () => customMsg('countdown', `${msg},${countdownTime.value}秒后将自动跳转登录页`),
        () => { router.push('/'); msgInstance.close() }
    )
    const msgInstance = ElMessage({
        message: `${msg},${countdownTime.value}秒后将自动跳转登录页`,
        duration: 0,
        showClose: true,
        onClose() {
            stopCountdown()
        },
        type: 'success',
        customClass: 'countdown'
    })
}

async function getCaptcha() {
    try {
        await formRef.value!.validateField('email')
        const { msg } = await registerCaptchaApi(form.email)
        ElMessage.success({ message: msg })
    } catch (err) { }
}
</script>

<template>
    <div class='login-container h-100vh flex justify-center items-center'>
        <div class='login-form w-400px'>
            <h1 class='text-center font-bold text-size-30px mb-30px'>xxxx预定系统</h1>
            <el-form ref="formRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="form.nickName" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-input v-model="form.captcha" />
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="getCaptcha">发送验证码</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-row justify="end" align="middle">
                    已有账号？去 <el-button link type='primary' @click="$router.push('/')"> 登录</el-button>
                </el-row>
            </el-form>
            <el-button type="primary" class="w-full mt-10px" @click="getRegister">注册</el-button>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>